<template>
    <div>
        <!-- 头部信息 面包屑 -->
        <div class="frist_show">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
             <el-breadcrumb-item :to="{ path: '/report' }">报告查询</el-breadcrumb-item>
              <el-breadcrumb-item :to="{path: '/sculpture/' + this.$route.params.bid}">体检结果</el-breadcrumb-item>
              <el-breadcrumb-item>干预方案报告</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
        </div>
        <div class="hand_healt">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick(healthlist.tempWhoId,healthlist.tempKeepId,healthlist.tempFoodId)">
                <el-tab-pane label="健康干预方案" name="first">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="tempWhoDeName" label="健康干预方案类型" width="250"></el-table-column>
                        <el-table-column prop="tempWhoDeKey" label="关键字" width="250"></el-table-column>
                        <el-table-column prop="tempWhoDeContent" label="健康干预方案内容"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="运动干预方案" name="second">
                    <el-table :data="tableDataIneer" style="width: 100%">
                        <el-table-column prop="tempKeepName" label="运动干预方案类型" width="250"></el-table-column>
                        <el-table-column prop="tempKeepIntensity" label="运动强度" width="250"></el-table-column>
                        <el-table-column prop="tempKeepDesc" label="运动干预方案内容"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="膳食干预方案" name="third">
                    <el-table :data="tableDatafood" style="width: 100%">
                        <el-table-column prop="tempFoodName" label="运动干预方案类型" width="150"></el-table-column>
                        <el-table-column prop="tempFoodType" label="运动强度" width="150"></el-table-column>
                        <el-table-column prop="tempFoodHeat" label="食物100g含的能量" width="150"></el-table-column>
                        <el-table-column prop="tempFoodProtein" label="100g含的蛋白质" width="150"></el-table-column>
                         <el-table-column prop="tempFoodFat" label="每100g含的脂肪量" width="150"></el-table-column>
                        <el-table-column prop="tempFoodDesc" label="食物描述"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
export default {
  name: 'Health',
  data () {
    return {
      activeName: 'first',
      healthlist: {},
      tableData: [],
      tableDataIneer: [],
      tableDatafood: []
    }
  },
  methods: {
    // 自动加载事件
    initHealth () {
      this.$axios.post(`/api/health/${this.$route.params.interId}`).then(result => {
        this.healthlist = result.data
        this.handleClick(result.data.tempWhoId, result.data.tempKeepId, result.data.tempFoodId)
      })
    },

    // 干预方案的选择事件
    handleClick (wid, kid, fid) {
      this.tableDatafood = []
      this.tableData = []
      this.tableDataIneer = []
      if (this.activeName === 'first') {
        this.$axios.post(`/api/health/wholesome/${wid}`).then(result => {
          result.data.forEach((item, index) => {
            this.tableData.push(item)
          })
        })
      }
      if (this.activeName === 'second') {
        this.$axios.post(`/api/health/keep/${kid}`).then(results => {
          results.data.forEach((item, index) => {
            this.tableDataIneer.push(item)
          })
        })
      }
      if (this.activeName === 'third') {
        this.$axios.post(`/api/health/food/${fid}`).then(resultf => {
          resultf.data.forEach((item, index) => {
            this.tableDatafood.push(item)
          })
        })
      }
    }
  },
  created () {
    this.initHealth()
  }
}
</script>

<style>
.hand_healt{position: absolute;top:100px;left:270px;width:1000px;height: 120px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);}
.frist_show{position: absolute;top: 0px;left:20px;width: 1500px;height: 50px;}
.frist_show .el-breadcrumb{margin-top: 15px;}
</style>
